<template>
	<div class="editor-container">
		<Toolbar
			:editor="editorRef"
			:mode="mode"
			:default-config='{
				excludeKeys: excludeKeys,
				insertKeys: {
					index: 3,
					keys: ["fontSize"]
				},
			}'
		/>
		<Editor
			:mode="mode"
			:defaultConfig="state.editorConfig"
			:style="{ height }"
			v-model="state.editorVal"
			@onCreated="handleCreated"
			@onChange="handleChange"
		/>
	</div>
</template>

<script setup lang="ts" name="wngEditor">
// https://www.wangeditor.com/v5/for-frame.html#vue3
import '@wangeditor/editor/dist/css/style.css';
import { reactive, shallowRef, watch, onBeforeUnmount } from 'vue';
import { IDomEditor } from '@wangeditor/editor';
import { Toolbar, Editor } from '@wangeditor/editor-for-vue';

// 定义父组件传过来的值
const props = defineProps({
	// 是否禁用
	disable: {
		type: Boolean,
		default: () => false,
	},
	// 内容框默认 placeholder
	placeholder: {
		type: String,
		default: () => '请输入内容...',
	},
	// https://www.wangeditor.com/v5/getting-started.html#mode-%E6%A8%A1%E5%BC%8F
	// 模式，可选 <default|simple>，默认 default
	mode: {
		type: String,
		default: () => 'default',
	},
	// 高度
	height: {
		type: String,
		default: () => '66vh',
	},
	// 双向绑定，用于获取 editor.getHtml()
	getHtml: String,
	// 双向绑定，用于获取 editor.getText()
	getText: String,
	// 工具栏除了指定key
	excludeKeys: {
		type: Array,
		default: () => []
	},
});

// 定义子组件向父组件传值/事件
const emit = defineEmits(['update:getHtml', 'update:getText', 'change']);

// 定义变量内容
const editorRef = shallowRef();
const state = reactive({
	editorConfig: {
		placeholder: props.placeholder,
		MENU_CONF: {
			uploadImage: {
				/* async customUpload(file:any, insertFn:any) { // 文件上传
					// 上传
					Upload().then(res => {
						const resData = res.data
						const { policy,accessid,signature,host,callback,dir } = resData
						let key = dir + randomString(16) + file.name.substring(file.name.lastIndexOf('.'))
						const formData = new FormData()
						formData.append('policy', policy)
						formData.append('OSSAccessKeyId', accessid)
						formData.append('signature', signature)
						formData.append('host', host)
						formData.append('callback', callback)
						formData.append('key', key)
						formData.append('file', file)
						axios.post(resData.host, formData).then((result:any) => {
							insertFn(result.data.data.url, result.data.data.filename, result.data.data.filename)
						})
					})
					const randomString = (len:any) => {
						len = len || 32;
						var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';    
						var maxPos = $chars.length;
						var pwd = '';
						for (var i = 0; i < len; i++) {
							pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
						}
						return pwd;
					}
					// insertFn(result.data.data.url, result.data.data.name, result.data.data.name)
				} */
			}
		}
	},
	editorVal: props.getHtml,
});
// 编辑器回调函数
const handleCreated = (editor: IDomEditor) => {
	editorRef.value = editor;
};
// 编辑器内容改变时
const handleChange = (editor: IDomEditor) => {
	emit('update:getHtml', editor.getHtml());
	emit('update:getText', editor.getText());
	emit('change');
};
// 页面销毁时
onBeforeUnmount(() => {
	const editor = editorRef.value;
	if (editor == null) return;
	editor.destroy();
});
// 监听是否禁用改变
// https://gitee.com/lyt-top/vue-next-admin/issues/I4LM7I
watch(
	() => props.disable,
	(bool) => {
		const editor = editorRef.value;
		if (editor == null) return;
		bool ? editor.disable() : editor.enable();
	},
	{
		deep: true,
	}
);
// 监听双向绑定值改变，用于回显
watch(
	() => props.getHtml,
	(val) => {
		state.editorVal = val;
	},
	{
		deep: true,
	}
);
</script>
